<template>
	<view class="content">
		<uni-nav-bar left-icon="arrowleft" color="white" backgroundColor="#393c43" title="留言咨询" @click-left="back" />
		<view class="form_container">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item line-division">
					<text class="title">姓名</text>
					<input class="uni-input long" name="username" placeholder="请输入姓名" />
				</view>
				<view class="uni-form-item line-division">
					<text class="title">手机号</text>
					<input class="uni-input long" name="cellphone" placeholder="请输入手机号" />
				</view>
				<view class="uni-form-item line-division">
					<text class="title">验证码</text>
					<input class="uni-input" name="verify_code" placeholder="请输入验证码" />
					<image :src="verifyCode"  style="width: 200rpx; height: 60rpx;margin-left: 5rpx; border-radius: 10rpx;" @click="refresh"></image>
				</view>
				<view class="uni-form-item line-division">
					<text class="title">短信码</text>
					<input class="uni-input" name="phone_code" placeholder="请输入短信码" />
					<button class="min-btn" type="warn" size="mini">发送验证码</button>
				</view>
				<view class="uni-form-item message_container">
					<text class="title ">留言内容</text>
					<textarea name="content" placeholder="请输入留言内容"/>
				</view>
				<button class="submit_btn" form-type="submit" type="warn">提交留言内容</button>
			</form>
		</view>
		
	</view>
</template>

<script>

export default {
	data() {
		return {
			verifyCode:this.websiteUrl+"/api/get_image_verify"
		};
	},
	onLoad() {},
	methods: {
		formSubmit: function(e) {
			console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
			var formdata = e.detail.value;
			uni.showModal({
				content: '表单数据内容：' + JSON.stringify(formdata),
				showCancel: false
			});
		},
		formReset: function(e) {
			console.log('清空数据');
		},
		back:function() {
			uni.switchTab({
				url:"../index/index"
			})
		},
		refresh:function(){
			this.verifyCode = this.websiteUrl+'/api/get_image_verify?t='+Math.random(new Date());
		}
		
	}
};
</script>

<style>
	.form_container{
		margin:20rpx 20rpx;
	}
	.line-division{
		border-bottom: solid 1px #32363c;
		padding-top: 10rpx;
		margin-bottom: 10rpx;
	}
	.uni-form-item{
		display: flex;
		
		height: 80rpx;
	}
	.min-btn{
		height: 60rpx;
		line-height: 60rpx;
		width: 210rpx;
	}
	.uni-form-item text{
		color:white;
		width: 190rpx;
		margin-bottom: 60rpx;
		font-size: 30rpx;
		line-height: 60rpx;
	}
	.uni-form-item .long{
		width: 70%;
	}
	.uni-form-item button{
		border-radius: 30rpx;
	}
	.uni-form-item input{
		background-color: white;
		width: 40%;
		border-radius: 20rpx;
		height: 60rpx;
		padding-left: 10rpx;
		font-size: 30rpx;
	}
	.uni-form-item textarea{
		background-color: white;
		border-radius: 20rpx;
		padding: 10rpx;
		width: 70%;
		height: 400rpx;
	}
	.message_container{
		height: 400rpx;
	}
	.submit_btn{
		margin-top: 60rpx;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 30rpx;
		width: 90%;
		border-radius: 30rpx;
	}
	
</style>
